/* Estilos generales para los bloques */
div {
  margin: 10px;
  padding: 20px;
  height: 150px;
  color: white;
  font-family: Arial, sans-serif;
  text-align: center;
  border-radius: 8px;
}

/* Gradientes cónicos */
#grad1 {
  background-image: conic-gradient(red, yellow, green);
}

#grad2 {
  background-image: conic-gradient(red, yellow, green, blue, black);
}

#grad3 {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

#grad4 {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

#grad5 {
  background-image: conic-gradient(
    red 0deg, red 90deg,
    yellow 90deg, yellow 180deg,
    green 180deg, green 270deg,
    blue 270deg
  );
  border-radius: 50%;
}

#grad6 {
  background-image: conic-gradient(from 90deg, red, yellow, green);
}

#grad7 {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
}

/* Gradientes cónicos repetitivos */
#grad8 {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
  border-radius: 50%;
}

#grad9 {
  background-image: repeating-conic-gradient(
    red 0deg 10deg,
    yellow 10deg 20deg,
    blue 20deg 30deg
  );
  border-radius: 50%;
}